let stateAll = localStorage.getItem('stateAll')
stateAll = false
//显示购物车列表
function showCartList() {
    let cartList = JSON.parse(localStorage.getItem('carts')) || []
    let str = `
    <tr>
        <td><input type="checkbox" class="checkbox-all" ${stateAll ? 'checked' : ''}>全选</td>
        <th>id</th>
        <th>商品图片</th>
        <th>商品信息</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
        <th>操作</th>
    </tr>
    `
    cartList.forEach(item => {
        let listStr = `
        <tr>
            <td><input type="checkbox" class="checkbox-item" ${item.state ? 'checked' : ''}></td>
            <td>${item.id}</td>
            <td><img src="${item.url}" alt="shop03"></td>
            <td class="itemTitle">${item.name}</td>
            <td id="price">￥${item.price}</td>
            <td><input type="button" name="minus" value="-" ${item.num == 1 ? 'disabled' : ''}>
            <input type="text" name="amount" value="${item.num}"><input type="button" name="plus" value="+"></td>
            <td class="singleprice" width="100px">￥${(item.singlePrice = item.price*item.num).toFixed(2)}</td>
            <td><a href="#">移入收藏</a><br><a class="delete-btn" href="#">删除</a></td>
        </tr>
        `
        str += listStr
    });
    totalPrice()
    $('table').html(str)
}

//购物车操作
function onCartList() {
    //事件委托
    $('table').on('click', 'td', function () {
        let target = $(event.target) || $(e.scrElment)
        //删除商品
        if (target.prop('class') == 'delete-btn') {
            let cartsData = JSON.parse(localStorage.getItem('carts')) || []
            let id = target.parent().parent().children().first().next().html()
            let index = cartsData.findIndex((item) => item.id == id)
            cartsData.splice(index, 1)
            localStorage.setItem('carts', JSON.stringify(cartsData))
            //3. 重新加载数据
            showCartList()
        }
        //商品数量+1
        if (target.prop('name') == 'plus') {
            let id = target.parent().parent().children().first().next().html()
            let pro = localStorage.getItem('carts')
            let cartsData = JSON.parse(pro) || []
            let index = cartsData.findIndex((item) => item.id == id)
            cartsData[index].num++
            cartsData[index].singlePrice = (cartsData[index].price * cartsData[index].num).toFixed(2)
            localStorage.setItem('carts', JSON.stringify(cartsData))
            totalPrice()
            showCartList()
        }
        //商品数量-1
        if (target.prop('name') == 'minus') {
            let id = target.parent().parent().children().first().next().html()
            let cartsData = JSON.parse(localStorage.getItem('carts')) || []
            let index = cartsData.findIndex((item) => item.id == id)
            cartsData[index].num--
            cartsData[index].singlePrice = (cartsData[index].price * cartsData[index].num).toFixed(2)
            localStorage.setItem('carts', JSON.stringify(cartsData))
            totalPrice()
            showCartList()
        }
        //全选
        if (target.prop('class') == 'checkbox-all') {
            let pro = localStorage.getItem('carts')
            let cartsData = JSON.parse(pro) || []
            if ($('.checkbox-all').prop('checked')) {
                stateAll = true
                cartsData.forEach(item => {
                    item.state = stateAll
                })
            } else {
                stateAll = false
                cartsData.forEach(item => {
                    item.state = stateAll
                })
            }
            localStorage.setItem('stateAll', stateAll)
            localStorage.setItem('carts', JSON.stringify(cartsData))
            showCartList()
        }
        //复选
        if (target.prop('class') == 'checkbox-item') {
            let id = $(this).parent().first().children().next().html()
            let pro = localStorage.getItem('carts')
            let cartsData = JSON.parse(pro) || []
            let index = cartsData.findIndex(item => item.id == id)
            cartsData[index].state = !cartsData[index].state
            stateAll = cartsData.every(item => item.state == true)
            localStorage.setItem('stateAll', stateAll)
            localStorage.setItem('carts', JSON.stringify(cartsData))
            showCartList()
        }
    })
}

//计算所有商品总价
function totalPrice() {
    let pro = localStorage.getItem('carts')
    let cartsData = JSON.parse(pro) || []
    let total = cartsData.reduce((s, item) => (s += Number(item.singlePrice)), 0)
    $('#totalPrice').html(total.toFixed(2))
}

showCartList()
onCartList()